<template>
  <BasicTable @register="registerTable">
    <template #orderInfo="{ text, record, column }">
      <div class="product-info text-wrap"  >
        <div class="pic"><img alt="" :src="record.goodsImage" /></div>
        <div class="info">
          <div class="name gray3 product-name">
            <span>{{ record.goodsName }}</span>
          </div>
          <div class="gray9" v-if="record.goodsAttr">{{ record.goodsAttrValue }}</div>
          <div class="orange" v-if="record.refundRealPrice > 0">{{ record.refundStatusName }}-{{ record.refundRealPrice }}</div>
        </div>
        <div class="d-c-c d-c">
          <div class="orange">￥ {{ record.totalPayPrice }}</div>
          <div class="gray3">x {{ record.number }}</div>
        </div>
      </div>
    </template>
  </BasicTable>
</template>
<script lang="ts" name="RefundGoodsList" setup>
  import { ref, watch, nextTick, onMounted } from "vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { propTypes } from "/@/utils/propTypes"
  import { BasicTable, BasicColumn, useTable } from "/@/components/Table"
  const { createMessage } = useMessage()
  
  const emits = defineEmits(['select'])
  const props = defineProps({
    orderGoodsList: propTypes.array.def(undefined)
  })

  
  const listColumns: BasicColumn[] = [
    {
      title: '商品信息',
      dataIndex: "orderInfo",
      align: 'left',
      slot: "orderInfo",
      width: 500,
    }
  ]

  const [registerTable, { reload, setTableData }] = useTable({
    columns: listColumns,
    bordered: false,
    showTableSetting: false,
    showIndexColumn: false,
    useSearchForm: false,
    pagination: false,
    rowSelection: { 
      type: "radio",
      onChange: (selectedRowKeys, selectedRows) => {
        console.log("selectedRows: ", selectedRows);
        emits('select', selectedRows[0])
      }
    },
    canResize: false,
    rowKey: "id"
  })

  onMounted(() => {
    nextTick(() => {
      props.orderGoodsList && setTableData(props.orderGoodsList)
    })
  })

  watch(
    () => props.orderGoodsList,
    (val) => {
      val &&
        nextTick(() => {
          setTableData(val)
        })
    }
  )


</script>

<style lang="less" scoped>
/*表格中的商品展示*/
.product-info {
  display: flex;
}

.product-info .pic {
  position: relative;
  width: 60px;
  height: 60px;
  background: #F0F0EE;

  image {
    width: 60px;
    height: 60px;
  }
}

.product-info .info {
  flex: 1;
  padding-left: 10px;
  overflow: hidden;
  line-height: 20px;
}

.product-info .name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-info .price {
  color: rgb(255, 51, 0);
}

.product-info .pic img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: 100%;
  max-width: 100%;
}
</style>